<script>
import { Search, Plus } from '@element-plus/icons-vue'
import { selectChooseList } from '@/api/admin/choose.js'
export default {
  components: {
    Search,
    Plus,
  },
  data() {
    return {
      params: {
        pageNo: 1,
        pageSize: 10,
        courseName: '',
        major: '',
        className: '',
      },
      total: 0,
      list: [],
    }
  },
  methods: {
    resetParamsAndLoad() {
      this.params.pageNo = 1
      this.loadChooseList()
    },
    async loadChooseList() {
      let { total, list } = await selectChooseList(this.params)
      this.total = total
      this.list = list
    },
    getScoreType(score) {
      if (score < 60) {
        return 'danger'
      } else if (score < 80) {
        return 'warning'
      } else {
        return 'success'
      }
    },
  },
  created() {
    this.loadChooseList()
  },
}
</script>

<template>
  <div class="title">
    <div class="title-left">
      <el-input placeholder="班级名关键字" size="small" clearable v-model="params.className"></el-input>
      <el-input placeholder="专业名关键字" size="small" clearable v-model="params.major"></el-input>
      <el-input placeholder="课程名关键字" size="small" clearable v-model="params.courseName"></el-input>
      <el-button type="primary" size="small" @click="resetParamsAndLoad">
        <el-icon>
          <Search></Search>
        </el-icon>
        <span>查询</span>
      </el-button>
    </div>
    <el-button type="success" size="small">
      <el-icon>
        <Plus></Plus>
      </el-icon>
      <span>新增</span>
    </el-button>
  </div>
  <el-table border :data="list">
    <el-table-column label="序号" type="index" width="60px"></el-table-column>
    <el-table-column label="课程名称" prop="course_name"></el-table-column>
    <el-table-column label="学生名称" prop="student_name"></el-table-column>
    <el-table-column label="学生班级" prop="class_name"></el-table-column>
    <el-table-column label="日常分" #default="{ row }" width="80px">
      <el-tag :type="getScoreType(row.sc_daily_score)" size="small" effect="dark">{{
        row.sc_daily_score
        }}</el-tag>
    </el-table-column>
    <el-table-column label="期末分" #default="{ row }" width="80px">
      <el-tag :type="getScoreType(row.sc_exam_score)" size="small" effect="dark">{{
        row.sc_exam_score
        }}</el-tag>
    </el-table-column>
    <el-table-column label="总分" #default="{ row }" width="80px">
      <el-tag :type="getScoreType(row.sc_score)" size="small" effect="dark">{{
        row.sc_score
        }}</el-tag>
    </el-table-column>
  </el-table>

  <el-pagination v-model:page-size="params.pageSize" v-model:current-page="params.pageNo"
    :page-sizes="[2, 5, 10, 15, 20]" layout="total, sizes, prev, pager, next, jumper" background size="small"
    :total="total" @change="loadChooseList">
  </el-pagination>
</template>

<style scoped>
.title {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}

.title-left {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

.title-left .el-input {
  margin-right: 10px;
}

.el-table {
  margin-top: 16px;
}

.el-pagination {
  margin-top: 16px;
  justify-content: center;
}
</style>
